<template>
  <div class="container">
    <nav-bar title="课程活动" :backToPage="backToPage"/>
    <!-- 分类 -->
    <div class="product-tabs">
      <switch-tab 
        :tabList="tabList" 
        :curTabIndex="curTabIndex"
        @itemClicked="tabClicked" 
      />
    </div>
    <div class="list" v-show="listshow">

      <div 
        class="item" 
        v-for="(item, index) in orders" 
        :key="index"
        @click="goToOrder(item.id)"
      >
        <div class="time-status-deal">
          <div class="time">{{item.createTime}}</div>
          <div class="status-deal">
            <div class="status">{{item.status}}</div>
            <!-- <div class="deal">
              <img src='../../assets/img/delete.png' />
            </div> -->
          </div>
        </div>
        <div class="pro-info" v-for="(product,idx) in item.itemInfo" :key="idx">
          <img :src='product.image' />
          <div class="name">{{product.productName}}</div>
          <div class="price-num">
            <div class="price">¥{{product.price}}</div>
            <div class="num">&times;{{product.count}}</div>
          </div>
        </div>
        <div class="total">
          <div class="amount">共{{item.productCount}}件</div>
          <div class="price">
            <span v-if="item.orderStatus===1">应付</span>总额:
            <i>¥{{item.orderTotalAmount}}</i>
          </div>
        </div>
        <div class="links">
          <div class="link link-on" v-if="item.orderStatus===1" @click.stop="goToPay(item)">支付</div>
          <!-- <div class="link" v-if="item.orderStatus===1" @click.stop="cancel(item)">取消</div> -->
          <div class="link" v-if="item.orderStatus===8 && item.status!=='退款中'" @click.stop="goToBackMoney(item.id)">取消预约</div>
          <div class="link link-on" v-if="item.RefundInfo && item.RefundInfo.RefundStatus!=='退款成功'" @click.stop="goToOrderRefund(item.RefundInfo.Id)">售后中</div>
          <!-- <div class="link link-on" v-if="item.orderStatus===5 && item.commentCount===0" @click.stop="goToComment(item)">评价有礼</div> -->
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SwitchTab from 'components/common/SwitchTab'
import { getUserClass } from '../../network/user'
import { getRefundList } from '../../network/order'

export default {
  components: {
    NavBar,
    SwitchTab
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      curTabIndex: 0,
      tabList: ['未参加课程', '已参加课程'],
      backToPage: '/user',
      orders: [],
      ordersOrigin: [],
      listshow: false,
    }
  },
  async mounted() {
    await this.getUserClass()
    this.listshow = true
  },
  methods: {
    goToBackMoney(orderId){
      this.$router.push({
        path: '/classCancel',
        query: {
          orderId
        }
      })
    },
    getUserClass(){
      return new Promise((resolve, reject) => {
        let requestData = {
          userKey: this.userKey,
          pageNo: 1,
          pageSize: 50,
          orderStatus: '',
        }
        getUserClass(requestData, res => {
          this.orders = res.Orders
          this.ordersOrigin = res.Orders

          // 获取售后订单，增加售后数据
          getRefundList(list => {
            this.orders = res.Orders.map(order => {
              list.map(item => {
                if(order.id === item.OrderId){
                  order.RefundInfo = item
                } else {
                  order.RefundInfo = null
                }
              })
              return order
            })
            this.ordersOrigin = res.Orders.map(order => {
              list.map(item => {
                if(order.id === item.OrderId){
                  order.RefundInfo = item
                } else {
                  order.RefundInfo = null
                }
              })
              return order
            })

            this.filterOrdersByStatus()
            resolve()
          })

          // this.filterOrdersByStatus()
          // resolve()
        })
      })
    },
    filterOrdersByStatus(){
      if(this.curTabIndex === 0){
        this.orders = this.ordersOrigin.filter(item => item.orderStatus === 8)
      } else
      if(this.curTabIndex === 1) {
        this.orders = this.ordersOrigin.filter(item => item.orderStatus === 5)
      }
    },
    goToOrder(orderId){
      this.$router.push({
        path: '/classView',
        query: {
          orderId
        }
      })
    },
    tabClicked(e){
      this.curTabIndex = e
      this.filterOrdersByStatus()
    },
    goToClassDetail(){
      this.$router.push({
        path: 'classDetail',
        query: {
          type: 'user'
        }
      })
    }
  },
}
</script>

<style scoped>
.product-tabs{
  padding: 12px 15px;
}

.tips{
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
}
.tips img{
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.list{
  padding-top: 2px;
}
.item{
  margin: 0 20px 15px 20px;
  background-color: #ffffff;
  padding: 0 18px;
  border-radius: 6px;
}
.item .time-status-deal{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
.item .time-status-deal img{
  width: 22px;
  height: 22px;
  padding-right: 10px;
}
.item .status-deal{
  display: flex;
  align-items: center;
}
.item .status-deal .status{
  line-height: 1;
  padding-right: 10px;
  margin-right: 5px;
  /* border-right: 1px solid #cccccc; */
}
.item .pro-info{
  padding: 15px 10px 15px 0;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.item .pro-info img{
  width: 80px;
  height: 80px;
  margin-right: 10px;
  flex-shrink: 0;
}
.item .pro-info .name{
  flex-grow: 1;
  padding-right: 10px;
  height: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 14px;
}
.item .pro-info .price-num{
  text-align: right;
}
.item .pro-info .price-num .num{
  color: #999;
}
.item .total{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  padding-right: 10px;
}
.item .total .amount{
  padding-right: 10px;
}
.item .total .price i{
  padding-left: 5px;
  color: #d50721;
}
.links{
  display: flex;
  justify-content: flex-end;
  padding: 10px 10px 15px 10px;
}
.links .link{
  min-width: 80px;
  padding: 8px 15px;
  font-size: 14px;
  margin-left: 10px;
  border-radius: 50px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  text-align: center;
}
.links .link-on{
  border: none;
  color: #ffffff;
  background-color: #d50721;
}
.links .link-ongray{
  border: none;
  color: #ffffff;
  background-color: #222;
}
</style>